<template>
<div class="Register">
  <header class="Register_header">
    <!-- 返回 -->
    <p class="Register_back">
      <img src="../../../static/imgs/return.png" @click="$router.go(-1)">
      <span>挂号陪诊</span>
    </p>
    <!-- 跳转到介绍 -->
    <p class="Register_to_serve">服务介绍</p>
  </header>
  <main class="Register_main">
  <div class="main_top">
    <section class="Register_section">
      <p><img src="../../../static/imgs/fangkuai.png"><span>请选择服务类型</span></p>
      <p></p>
    </section>
    <!-- 切换事件 -->
    <div class="Register_zhujia">
      <p class="change">专家号</p>
      <p>特需号</p>
    </div>
  </div>
  <section class="Register_infos">
    <!-- 医院选择 -->
    <router-link to='/Re_opt'>
    <div class="infos1 Register_to_opt">
      <img src="../../../static/imgs/dd_infos1.png">
      <p><input type="text"  placeholder="北京儿童医院"/></p>
      <img src="../../../static/imgs/dd_infos7.png">
    </div>
    </router-link>
    <!-- 科室选择 -->
    <router-link to='/Re_depart'>
    <div class="infos1 Register_to_departments">
      <img src="../../../static/imgs/dd_infos2.png">
      <p><input type="text"  placeholder="请选择挂号科室(必选)"/></p>
      <img src="../../../static/imgs/dd_infos7.png">
    </div>
    </router-link>
    <!-- 医生选择 -->
    <router-link to='Re_doctorlist'>
    <div class="infos1 Re_to_doctor">
      <img src="../../../static/imgs/dd_infos3.png">
      <p><input type="text"  placeholder="医生(不选,推荐最优)"/></p>
      <img src="../../../static/imgs/dd_infos7.png">
    </div>
    </router-link>
    <!-- 疾病选择 -->
    <router-link to='Re_disease'>
    <div class="infos1 Re_to_disease">
      <img src="../../../static/imgs/dd_infos4.png">
      <p><input type="text"  placeholder="请选择疾病(选填)"/></p>
      <img src="../../../static/imgs/dd_infos7.png">
    </div>
    </router-link>
    <!-- 就诊时间 -->
    <div class="infos1">
      <img src="../../../static/imgs/dd_infos5.png">
      <p>
        <section id="form">
          <form action="">
            <input type="text" name="USER_AGE" id="USER_AGE" readonly class="input" placeholder="请填写你的出生日期" />
            <div class="clear h10"></div>
          </form>
        </section>
      </p>
      <img src="../../../static/imgs/dd_infos7.png">
    </div>
    <!-- 患者信息 -->
    <router-link to='Re_patient'>
    <div class="infos1 Re_to_patient">
      <img src="../../../static/imgs/dd-touxiang.png">
      <p><input type="text"  placeholder="请选择患者信息"/></p>
      <img src="../../../static/imgs/dd_infos7.png">
    </div>
    </router-link>
    <div class="infos1 infos2">
      <p>
        <img src="../../../static/imgs/dd-bianji.png">
        <input type="text" placeholder="备注相关信息">
      </p>
    </div>
    <!-- 地图 -->
    <div class="infos1 Re_to_map" @click="isMapOpen=true">
      <img src="../../../static/imgs/dd_infos1.png">
      <p><input type="text"  placeholder="该医院所在位置"/></p>
      <img src="../../../static/imgs/dd_infos7.png">
    </div>
  </section>
  <!-- 点击切换事件 -->
  <section class="main_bottom">
    <div class="infos3">
      <p>初级挂号导诊 <img class="Register_to_serve" src="../../../static/imgs/dd-btnn.png"></p>
      <span class='rot'></span><!-- <img  src="../../imgs/dd-checked.png"> -->
    </div>
    <div class="infos3">
      <p>高级挂号导诊 <img class="Register_to_serve" src="../../../static/imgs/dd-btnn.png"></p>
      <span></span><!-- <img src="../../imgs/dd-yuan.png"> -->
    </div>
  </section>
  </main>
  <!--有点击事件-->
  <footer class="footer">
    <p class="Register_next">下一步</p>
  </footer>

  <div v-bdmap class="map-wrapper" id="map" :class="{active:isMapOpen}" @click="isMapOpen=false">
  </div>
</div>
</template>
<script>
    import '../../../static/js/bdmap.js'
    export default {
        name:'Register',
        data () {
          return {
            isMapOpen: false
          }
        },
        directives: {
          bdmap: {
            inserted: function(el){
              //创建和初始化地图函数：
              function initMap(){
                createMap();//创建地图
                // setMapEvent();//设置地图事件
                // addMapControl();//向地图添加控件
                // addMapOverlay();//向地图添加覆盖物
              }
              function createMap(){
                map = new BMap.Map('map');
                map.centerAndZoom(new BMap.Point(116.582098,39.836481),11);
              }
              function setMapEvent(){
                map.enableScrollWheelZoom();
                map.enableKeyboard();
                map.enableDragging();
                map.enableDoubleClickZoom()
              }
              function addClickHandler(target,window){
                target.addEventListener("click",function(){
                  target.openInfoWindow(window);
                });
              }
              function addMapOverlay(){
              }
              // //向地图添加控件
              // function addMapControl(){
              //   var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
              //   scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
              //   map.addControl(scaleControl);
              //   var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
              //   map.addControl(navControl);
              //   var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
              //   map.addControl(overviewControl);
              // }
              var map;
              initMap();
            }
          }
        }
    }

</script>
<style scoped lang='less'>
    .PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

.Flex{
    display:flex;
    justify-content: space-between;
    align-items: center;

}

body{
      background: #eff3f2;
      scroll:none;

}
.Register_header{
       background: url(../../../static/imgs/Reg_serve_bg01.jpg);

        position: fixed;
        top: 0;
        width: 100%;
        .Flex;
        .PxToRem(font-size, 39);
        .PxToRem(height, 88);
         background: #f8f8f8;
         padding:0 2%;
     p:nth-child(1){
           display: flex;
           align-items: center;
           span{
              .PxToRem(margin-left, 39);
           }
           img{
               .PxToRem(width, 55);
               .PxToRem(height, 55);
           }
   }
     p:nth-child(2){
       .PxToRem(padding-right, 35);
   }
}
.Register_main{
    overflow-y: hidden;
    .PxToRem(margin-top,88);
     .main_top{
      background: #fff;
       .Register_section{
       .PxToRem(padding-top,40);
       .PxToRem(font-size, 39);
       .Flex;
       p:nth-child(1){
             .PxToRem(padding-left, 36);
              display: flex;
              align-items: center;
           span{
              .PxToRem(font-size, 30);
              .PxToRem(margin-left, 39);
               color: #999;  }
         }
    }

.Register_zhujia{
           .PxToRem(margin-top,41);
           .PxToRem(padding-bottom,48);
          .Flex;
           justify-content: space-around;
           p:nth-child(1){
            .PxToRem(margin-left,109);
           }
          p{
             border: 1px solid #999999;
             .PxToRem(width, 277);
             .PxToRem(height, 87);
             .PxToRem(border-radius, 7);
             text-align: center;
             .PxToRem(width, 277);
             .PxToRem(line-height, 87);
             .PxToRem(font-size, 30);
          }
          p.change{
            color:#1ac5a1;
            border:1px solid #1ac5a1;
          }
       }

     }

.Register_infos{
    .PxToRem(margin-top,20);
      background: #fff;
      #form{
        margin-left:-2%;
      }
      #USER_AGE{
            .PxToRem(font-size, 28);
            border:none;

      }
       .infos1{
           border-bottom: 1px solid #f7f7f7;
           .PxToRem(height, 120);
           .PxToRem(font-size, 28);
           .Flex();
           justify-content: space-around;
           .PxToRem(padding-left, 40);
           .PxToRem(padding-right, 30);
           p{
               flex: 3;
               .PxToRem(padding-left, 41);
               input{
                   border: none;
                   outline: none;
               }
           }
       }

.infos2{
         p{.PxToRem(border-radius,18);
             .PxToRem(width, 658);
             .PxToRem(height, 140);
              background: #eff3f6;
              .Flex();
            input{
                 flex: 2;
                 background: #eff3f6;
                 outline: none;
           .PxToRem(padding-left, 21);
            }
         }
      }

   }


   .main_bottom{
        .PxToRem(-top, 22);
        .PxToRem(padding-bottom, 157);
        .infos3{
             .Flex();
             background: #FFFFFF;
             padding: 0 4%;
             .PxToRem(height, 123);
             border-bottom: 1px solid #f7f7f7;
             .PxToRem(font-size, 31);
             span{
                .PxToRem(height, 45);
                .PxToRem(width, 44);
                background:url("../../../static/imgs/dd-yuan.png");
             }
             span.rot{
                  background:url("../../../static/imgs/dd-checked.png");
             }
       }
    }
}

.footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    .PxToRem(height, 157);
    display: flex;
    align-items: center;
    background: #fff;
    p{
        .PxToRem(width, 659);
        .PxToRem(height, 93);
         background: #1cc6a2;
        .PxToRem(border-radius,18);
         margin: 0 auto;
         text-align: center;
        .PxToRem(line-height, 93);
        color: #fff;
    }
}

.Register{
  position: relative;
  .map-wrapper{
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    transform: scale(0);
    transition: transform 1.5s ease;
    background:orange;
    z-index:9999;
    &.active{
      transform: scale(1);
    }
  }
}


</style>


